<template>
  <view class="location-help-page">
    <!-- 当前位置区域 -->
    <view class="current-location-section">
      <view class="section-title">
        <u-icon name="map-pin" size="24" color="#666"></u-icon>
        <text class="title-text">当前位置</text>
      </view>
      
      <view class="location-card">
        <view class="location-icon">📍</view>
        <view class="location-info">
          <text class="location-address">{{ currentLocation.address || '正在获取位置...' }}</text>
          <text class="location-coordinates">{{ currentLocation.coordinates || '坐标获取中...' }}</text>
          <text class="location-time">{{ currentLocation.time || '时间获取中...' }}</text>
        </view>
        <view class="location-action">
          <text class="action-text" @click="refreshLocation">刷新</text>
        </view>
      </view>
    </view>

    <!-- 紧急定位区域 -->
    <view class="emergency-location-section">
      <view class="section-title">
        <u-icon name="warning" size="24" color="#666"></u-icon>
        <text class="title-text">紧急定位</text>
      </view>
      
      <view class="emergency-cards">
        <view class="emergency-card primary" @click="sendEmergencyLocation">
          <view class="card-icon">🚨</view>
          <view class="card-content">
            <text class="card-title">发送紧急位置</text>
            <text class="card-desc">向紧急联系人发送当前位置</text>
          </view>
          <view class="card-action">
            <text class="action-text">立即发送</text>
          </view>
        </view>

        <view class="emergency-card" @click="shareLocation">
          <view class="card-icon">📤</view>
          <view class="card-content">
            <text class="card-title">分享位置</text>
            <text class="card-desc">向指定联系人分享位置</text>
          </view>
          <view class="card-action">
            <text class="action-text">分享</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 位置历史区域 -->
    <view class="history-section">
      <view class="section-title">
        <u-icon name="list" size="24" color="#666"></u-icon>
        <text class="title-text">位置历史</text>
      </view>
      
      <view class="history-list">
        <view class="history-item" @click="viewLocationDetail(0)">
          <view class="history-icon">📍</view>
          <view class="history-info">
            <text class="history-address">智慧社区A区1号楼</text>
            <text class="history-time">2025-01-30 14:30:25</text>
            <text class="history-type">手动定位</text>
          </view>
          <view class="history-action">
            <text class="action-text">查看</text>
          </view>
        </view>
        
        <view class="history-item" @click="viewLocationDetail(1)">
          <view class="history-icon">📍</view>
          <view class="history-info">
            <text class="history-address">社区健身广场</text>
            <text class="history-time">2025-01-30 10:15:42</text>
            <text class="history-type">自动定位</text>
          </view>
          <view class="history-action">
            <text class="action-text">查看</text>
          </view>
        </view>
        
        <view class="history-item" @click="viewLocationDetail(2)">
          <view class="history-icon">📍</view>
          <view class="history-info">
            <text class="history-address">社区超市</text>
            <text class="history-time">2025-01-29 16:45:18</text>
            <text class="history-type">手动定位</text>
          </view>
          <view class="history-action">
            <text class="action-text">查看</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 定位设置区域 -->
    <view class="settings-section">
      <view class="section-title">
        <u-icon name="setting" size="24" color="#666"></u-icon>
        <text class="title-text">定位设置</text>
      </view>
      
      <view class="settings-grid">
        <view class="setting-item" @click="toggleSetting(0)">
          <view class="item-icon">📍</view>
          <view class="item-content">
            <text class="item-title">自动定位</text>
            <text class="item-desc">定期自动更新位置信息</text>
          </view>
          <view class="item-switch">
            <text class="switch-text" :class="{ 'active': autoLocation }">{{ autoLocation ? '开启' : '关闭' }}</text>
          </view>
        </view>
        
        <view class="setting-item" @click="toggleSetting(1)">
          <view class="item-icon">🔔</view>
          <view class="item-content">
            <text class="item-title">位置提醒</text>
            <text class="item-desc">到达特定地点时提醒</text>
          </view>
          <view class="item-switch">
            <text class="switch-text" :class="{ 'active': locationReminder }">{{ locationReminder ? '开启' : '关闭' }}</text>
          </view>
        </view>
        
        <view class="setting-item" @click="toggleSetting(2)">
          <view class="item-icon">📱</view>
          <view class="item-content">
            <text class="item-title">紧急联系人</text>
            <text class="item-desc">设置紧急位置分享联系人</text>
          </view>
          <view class="item-action">
            <text class="action-text">设置</text>
          </view>
        </view>
        
        <view class="setting-item" @click="toggleSetting(3)">
          <view class="item-icon">🗺️</view>
          <view class="item-content">
            <text class="item-title">地图服务</text>
            <text class="item-desc">选择地图服务提供商</text>
          </view>
          <view class="item-action">
            <text class="action-text">选择</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 位置服务区域 -->
    <view class="service-section">
      <view class="section-title">
        <text class="title-icon">🔧</text>
        <text class="title-text">位置服务</text>
      </view>
      
      <view class="service-cards">
        <view class="service-card" @click="openMap">
          <view class="card-icon">🗺️</view>
          <view class="card-content">
            <text class="card-title">打开地图</text>
            <text class="card-desc">查看详细地图信息</text>
          </view>
          <view class="card-action">
            <text class="action-text">打开</text>
          </view>
        </view>
        
        <view class="service-card" @click="getDirections">
          <view class="card-icon">🧭</view>
          <view class="card-content">
            <text class="card-title">路线导航</text>
            <text class="card-desc">获取到达目的地的路线</text>
          </view>
          <view class="card-action">
            <text class="action-text">导航</text>
          </view>
        </view>
        
        <view class="service-card" @click="findNearby">
          <view class="card-icon">🔍</view>
          <view class="card-content">
            <text class="card-title">附近搜索</text>
            <text class="card-desc">搜索附近的设施和服务</text>
          </view>
          <view class="card-action">
            <text class="action-text">搜索</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 注意事项提示 -->
    <view class="notice-info">
      <view class="info-icon">⚠️</view>
      <view class="info-content">
        <text class="info-title">重要提醒</text>
        <text class="info-desc">位置信息仅用于紧急求助和安全保障，我们会严格保护您的隐私。请确保定位权限已开启。</text>
      </view>
    </view>
  </view>
</template>

<script setup>
/**
 * 一键定位页面
 * @author Wu.Liang
 * @date 2025-01-30
 * @version 1.0.0
 * @description 一键定位功能页面，提供发送位置、紧急定位等功能
 */

import { ref, reactive, onMounted } from 'vue'

// 页面数据
const currentLocation = ref({
  address: '',
  coordinates: '',
  time: ''
})

const autoLocation = ref(true)
const locationReminder = ref(false)

// 页面方法
const goBack = () => {
  uni.navigateBack()
}

const refreshPage = () => {
  uni.showToast({
    title: '页面已刷新',
    icon: 'success'
  })
}

const refreshLocation = () => {
  uni.showToast({
    title: '正在获取位置...',
    icon: 'loading'
  })
  
  // 模拟获取位置
  setTimeout(() => {
    currentLocation.value = {
      address: '智慧社区A区1号楼3单元',
      coordinates: '经度: 116.397128, 纬度: 39.916527',
      time: new Date().toLocaleString()
    }
    uni.showToast({
      title: '位置已更新',
      icon: 'success'
    })
  }, 2000)
}

const sendEmergencyLocation = () => {
  if (!currentLocation.value.address) {
    uni.showToast({
      title: '请先获取位置信息',
      icon: 'none'
    })
    return
  }
  
  uni.showModal({
    title: '确认发送',
    content: '是否向紧急联系人发送当前位置？',
    success: (res) => {
      if (res.confirm) {
        // 模拟发送位置
        uni.showToast({
          title: '正在发送位置...',
          icon: 'loading'
        })
        setTimeout(() => {
          uni.showToast({
            title: '位置已发送',
            icon: 'success'
          })
        }, 2000)
      }
    }
  })
}

const shareLocation = () => {
  if (!currentLocation.value.address) {
    uni.showToast({
      title: '请先获取位置信息',
      icon: 'none'
    })
    return
  }
  
  uni.showModal({
    title: '选择分享方式',
    content: '请选择位置分享的方式',
    showCancel: true,
    cancelText: '取消',
    confirmText: '微信分享',
    success: (res) => {
      if (res.confirm) {
        // 模拟分享位置
        uni.showToast({
          title: '正在分享位置...',
          icon: 'loading'
        })
        setTimeout(() => {
          uni.showToast({
            title: '位置已分享',
            icon: 'success'
          })
        }, 2000)
      }
    }
  })
}

const viewLocationDetail = (index) => {
  const locations = ['智慧社区A区1号楼', '社区健身广场', '社区超市']
  uni.showModal({
    title: '位置详情',
    content: `位置：${locations[index]}\n时间：2025-01-30\n类型：手动定位\n坐标：经度 116.397128, 纬度 39.916527`,
    showCancel: false,
    confirmText: '知道了'
  })
}

const toggleSetting = (index) => {
  switch (index) {
    case 0:
      autoLocation.value = !autoLocation.value
      uni.showToast({
        title: `自动定位已${autoLocation.value ? '开启' : '关闭'}`,
        icon: 'success'
      })
      break
    case 1:
      locationReminder.value = !locationReminder.value
      uni.showToast({
        title: `位置提醒已${locationReminder.value ? '开启' : '关闭'}`,
        icon: 'success'
      })
      break
    case 2:
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      })
      break
    case 3:
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      })
      break
  }
}

const openMap = () => {
  uni.showToast({
    title: '正在打开地图...',
    icon: 'loading'
  })
  setTimeout(() => {
    uni.showToast({
      title: '地图已打开',
      icon: 'success'
    })
  }, 1500)
}

const getDirections = () => {
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  })
}

const findNearby = () => {
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  })
}

// 页面生命周期
onMounted(() => {
  console.log('一键定位页面已加载')
  // 初始化位置信息
  refreshLocation()
})
</script>

<style scoped>
.location-help-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #3742fa 0%, #5f27cd 100%);
  padding-bottom: 40rpx;
  width: 100%;
}

/* 区域标题 */
.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.title-icon {
  font-size: 32rpx;
  margin-right: 20rpx;
}

.title-text {
  color: #333;
  font-size: 32rpx;
  font-weight: bold;
}

/* 当前位置区域 */
.current-location-section {
  background: #fff;
  margin: 30rpx;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  width: calc(100% - 60rpx);
  box-sizing: border-box;
}

.location-card {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  border-left: 8rpx solid #3742fa;
}

.location-icon {
  font-size: 48rpx;
  margin-right: 30rpx;
}

.location-info {
  flex: 1;
}

.location-address {
  display: block;
  color: #333;
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.location-coordinates {
  display: block;
  color: #666;
  font-size: 24rpx;
  margin-bottom: 6rpx;
}

.location-time {
  display: block;
  color: #999;
  font-size: 22rpx;
}

.location-action {
  padding: 16rpx 24rpx;
  background: #3742fa;
  color: #fff;
  border-radius: 20rpx;
  font-size: 24rpx;
}

/* 紧急定位区域 */
.emergency-location-section {
  background: #fff;
  margin: 30rpx;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  width: calc(100% - 60rpx);
  box-sizing: border-box;
}

.emergency-cards {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.emergency-card {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  border-left: 8rpx solid #3742fa;
  transition: all 0.3s ease;
}

.emergency-card.primary {
  background: linear-gradient(135deg, #3742fa 0%, #5f27cd 100%);
  color: #fff;
}

.emergency-card.primary .card-title,
.emergency-card.primary .card-desc {
  color: #fff;
}

.card-icon {
  font-size: 48rpx;
  margin-right: 30rpx;
}

.card-content {
  flex: 1;
}

.card-title {
  display: block;
  color: #333;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.card-desc {
  display: block;
  color: #666;
  font-size: 24rpx;
}

.card-action {
  padding: 16rpx 24rpx;
  background: #3742fa;
  color: #fff;
  border-radius: 20rpx;
  font-size: 24rpx;
}

.emergency-card.primary .card-action {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* 位置历史区域 */
.history-section {
  background: #fff;
  margin: 30rpx;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  width: calc(100% - 60rpx);
  box-sizing: border-box;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.history-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  border: 2rpx solid #e9ecef;
  transition: all 0.3s ease;
}

.history-item:active {
  transform: scale(0.98);
  background: #e9ecef;
}

.history-icon {
  font-size: 48rpx;
  margin-right: 30rpx;
}

.history-info {
  flex: 1;
}

.history-address {
  display: block;
  color: #333;
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.history-time {
  display: block;
  color: #666;
  font-size: 24rpx;
  margin-bottom: 6rpx;
}

.history-type {
  display: block;
  color: #3742fa;
  font-size: 22rpx;
}

.history-action {
  padding: 16rpx 24rpx;
  background: #3742fa;
  color: #fff;
  border-radius: 20rpx;
  font-size: 24rpx;
}

/* 定位设置区域 */
.settings-section {
  background: #fff;
  margin: 30rpx;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  width: calc(100% - 60rpx);
  box-sizing: border-box;
}

.settings-grid {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.setting-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  border: 2rpx solid #e9ecef;
  transition: all 0.3s ease;
}

.setting-item:active {
  transform: scale(0.98);
  background: #e9ecef;
}

.item-icon {
  font-size: 48rpx;
  margin-right: 30rpx;
}

.item-content {
  flex: 1;
}

.item-title {
  display: block;
  color: #333;
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.item-desc {
  display: block;
  color: #666;
  font-size: 24rpx;
}

.item-switch {
  padding: 16rpx 24rpx;
  background: #e9ecef;
  color: #666;
  border-radius: 20rpx;
  font-size: 24rpx;
}

.switch-text.active {
  background: #3742fa;
  color: #fff;
}

.item-action {
  padding: 16rpx 24rpx;
  background: #3742fa;
  color: #fff;
  border-radius: 20rpx;
  font-size: 24rpx;
}

/* 位置服务区域 */
.service-section {
  background: #fff;
  margin: 30rpx;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  width: calc(100% - 60rpx);
  box-sizing: border-box;
}

.service-cards {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.service-card {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  border-left: 8rpx solid #3742fa;
  transition: all 0.3s ease;
}

.service-card:active {
  transform: scale(0.98);
  background: #e9ecef;
}

/* 注意事项提示 */
.notice-info {
  display: flex;
  align-items: flex-start;
  background: #fff;
  margin: 30rpx;
  padding: 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  width: calc(100% - 60rpx);
  box-sizing: border-box;
}

.info-icon {
  font-size: 40rpx;
  margin-right: 20rpx;
  margin-top: 4rpx;
}

.info-content {
  flex: 1;
}

.info-title {
  display: block;
  color: #333;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.info-desc {
  display: block;
  color: #666;
  font-size: 24rpx;
  line-height: 1.6;
}

/* 响应式设计 */
@media screen and (max-width: 375px) {
  .emergency-cards,
  .history-list,
  .settings-grid,
  .service-cards {
    gap: 20rpx;
  }
  
  .emergency-card,
  .history-item,
  .setting-item,
  .service-card {
    padding: 20rpx;
  }
  
  .current-location-section,
  .emergency-location-section,
  .history-section,
  .settings-section,
  .service-section,
  .notice-info {
    margin: 20rpx;
    width: calc(100% - 40rpx);
  }
}
</style>
